<template>
  <div>
    <mt-swipe :auto="4000" :show-indicators="false">
      <mt-swipe-item v-for="(item,index) in bannerlist" :key='index'>
        <a :href="'http://ph.shikee.tv/?ds_id='+item.fid" class="banner">
          <img :src="item.picurl" :alt="item.title">
          <h4>{{item.title}}</h4>
        </a>
      </mt-swipe-item>
      <!-- <mt-swipe-item>
        <a class="banner">
          <img src="../assets/images/hotel-sjfs.jpg" alt="环卫暖冬活动">
        </a>
      </mt-swipe-item> -->
    </mt-swipe>

    <!-- <template v-if="typeList.length === 0">
      <mt-tabbar v-model="active">
        <mt-tab-item v-for="(n,index) in taps" :id="index">
          {{n}}
        </mt-tab-item>
      </mt-tabbar>

      <mt-tab-container v-model="active">
        <mt-tab-container-item v-for="(n,index) in playList2" :id="index">
        <ul class="playList" style="background:rgb(245,245,245)" v-if="index == 0">
          <li v-for="(item,index) in playList2" :key='index'>
            <a :href="item.url">
              <div class="playBox" :style="'background-image:url('+item.coverpic+')' ">
                <div class="mask"><img src="../assets/images/play.png"></div>
                <div class="type" v-if="item.playType == 1" style="background:green">正在直播</div>
                <div class="type" v-if="item.playType == 2" style="background:#d68a00">回放</div>
              </div>
            </a>
            <p class="ellipsis">{{item.name}}</p>
          </li>
        </ul>
        <ul v-else>
          <li>
            <div class="nothing">
              <img src="../assets/images/nothing2.png">
            </div>
          </li>
        </ul>
        </mt-tab-container-item>
      </mt-tab-container>
    </template> -->

    <template>
      <mt-tabbar v-model="active">
        <mt-tab-item v-for="(item,index) in menue" :id="index" :key="index">
          {{item.name}}
        </mt-tab-item>
      </mt-tabbar>

      <mt-tab-container v-model="active">
        <mt-tab-container-item v-for="(item,index) in playList" :id="index" :key="index">
        <ul class="playList" style="background:rgb(245,245,245)">
          <template v-if="item != null">
            <li v-for="(item2,index2) in item" :key='index2'>
              <a :href="'http://ph.shikee.tv/?ds_id='+item2.ds_id">
                <div class="playBox" :style="'background-image:url('+item2.coverpic+')' ">
                  <div class="mask"><img src="../assets/images/play.png"></div>
                  <div class="type" v-if="item2.direct_status == 'not_started'">未开播</div>
                  <div class="type playing" v-else-if="item2.direct_status == 'running'">正在直播</div>
                  <div class="type" v-else-if="item2.direct_status == 'stop'">暂停</div>
                  <div class="type playend" v-else="item2.direct_status == 'end'">已结束</div>
                </div>
              </a>
              <p class="ellipsis">{{item2.name}}</p>
            </li>
          </template>
          <li v-else>
            <div class="nothing">
              <img src="../assets/images/nothing2.png">
            </div>
          </li>
          <template v-if="index == 0">
            <li v-for="(item3,index3) in playList2">
              <a :href="'http://ph.shikee.tv/?ds_id='+item3.ds_id">
                <div class="playBox" :style="'background-image:url('+item3.coverpic+')' ">
                  <div class="mask"><img src="../assets/images/play.png"></div>
                  <div class="type" v-if="item3.direct_status == 'not_started'">未开播</div>
                  <div class="type playing" v-else-if="item3.direct_status == 'running'">正在直播</div>
                  <div class="type" v-else-if="item3.direct_status == 'stop'">暂停</div>
                  <div class="type playend" v-else="item3.direct_status == 'end'">已结束</div>
                </div>
              </a>
              <p class="ellipsis">{{item3.name}}</p>
            </li>
          </template>
        </ul>
        </mt-tab-container-item>
      </mt-tab-container>
    </template>
  </div>
</template>

<script>
import Vue from 'vue';

import { TabContainer, TabContainerItem } from 'mint-ui';
Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);
import { Tabbar, TabItem } from 'mint-ui';
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);
import { Swipe, SwipeItem } from 'mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
export default {
  data() {
    return {
      id:'',bannerlist:[],active:0,menue:[],typeList:[],taps:['直播案列','正在直播'],playList:[],playList2:[
      {coverpic:'http://res.shikee.tv/uploads/2018/01/31/1517392634695223.jpg',ds_id:'114',url:'http://ph.shikee.tv/?ds_id=114',name:'探秘永州 | 永州人民转起来',direct_status:'end'},
      {coverpic:'http://res.shikee.tv/uploads/2018/01/30/1517294592220619.jpg',ds_id:'114',url:'http://ph.shikee.tv/?ds_id=111',name:'开年巨献|美时美客直播带您亲临《青瓷》话剧现场',direct_status:'end'}
      ]
    }
  },
  components: {
  },
  mounted() {
    this.getData();
    console.log(this.id)
  },
  methods:{
    getData(){
      var that = this;
      this.id = this.search('uid');
      console.log(this.id)
      this.axios.post(this.beseUrl+'microweb/index/init','uid='+this.id+'&nums=1').then(function(res){
        console.log(res)
        if(res.data.code == '200'){
          that.bannerlist = res.data.data.carouselpic;
          that.menue = res.data.data.menue;
          document.title = res.data.data.title;
          for(let i =0;i<that.menue.length;i++){
            that.loadlist(that.menue[i].muid,i);
          }
        }else{
          Toast('加载失败');
        }
      }).catch(function(error){
        console.log(error)
      })
    },
    showmenu (){
      this.showM = !this.showM ;
    },
    fetchData (){
      console.log(this.id)
    },
    loadlist (id,index){
      console.log(id)
      var that = this;
      this.axios.post(this.beseUrl+'microweb/index/getdslist','muid='+id+'&page=1&nums=1').then(function (res) {
        console.log(res.data)
        if(res.data.code == '200'){
          that.playList.push(res.data.data.list)
        }
          console.log(res);
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  }
}
</script>

<style>
</style>